<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件集成了常见搜索框所需功能，可以一键引入。
		</demo-desc>
		
		<fu-section title="基本案例" customClass="fu-m-t-20" type="line">
			<fu-search class="fu-m-t-20" @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input" @cancel="cancel" @clear="clear"></fu-search>
			<view class="fu-m-t-20 fu-text-c">当前输入为：{{ searchValue }}</view>
		</fu-section>
		
		<fu-section title="自定义样式" customClass="fu-m-t-20" type="line">
			<demo-desc margin="0 0 10px 0">使用 bgColor 属性自定义背景色</demo-desc>
			<fu-search class="fu-m-t-20" placeholder="自定义背景色" bgColor="#EEEEEE" @confirm="search"></fu-search>
		</fu-section>
		
		<fu-section title="只读样式" customClass="fu-m-t-20" type="line">
			<demo-desc margin="0 0 10px 0">使用 readonly 使搜索框只读</demo-desc>
			<fu-search class="fu-m-t-20" placeholder="自定义背景色" @confirm="search" readonly></fu-search>
		</fu-section>
		
		<fu-section title="自定义icon" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-search placeholder="插槽自定义searchIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
					<fu-icons slot="searchIcon" color="#c6c6c6" size="18" name="home" />
				</fu-search>
			</view>
			<view class="fu-m-t-20">
				<fu-search searchIcon="home" placeholder="非插槽自定义searchIcon" @confirm="search" @cancel="cancel" cancel-text="cancel"></fu-search>
			</view>
		</fu-section>
		
		<fu-section title="对齐方式" customClass="fu-m-t-20" type="line">
			<demo-desc margin="0 0 10px 0">使用 inputAlign 使搜索框左对齐</demo-desc>
			<fu-search placeholder="对齐方式 inputAlign" inputAlign="left" @confirm="search" @cancel="cancel" cancel-text="cancel"></fu-search>
		</fu-section>
		
		<fu-section title="控制清除/右侧按钮" customClass="fu-m-t-20" type="line">
			<demo-desc margin="0 0 10px 0">使用 clearabled 属性设置清除按钮</demo-desc>
			<view class="fu-m-t-20">
				<fu-search radius="5" placeholder="一直显示" clearabled="always" @confirm="search" @cancel="cancel" />
			</view>
			<view class="fu-m-t-20">
				<fu-search radius="5" placeholder="自动显示隐藏" clearabled="auto" @confirm="search" />
			</view>
			<view class="fu-m-t-20">
				<fu-search radius="100" placeholder="一直不显示" clearabled="none" :showAction="false" @confirm="search" />
			</view>
		</fu-section>
	</view>
</template>

<script setup>
	import { reactive, ref, getCurrentInstance } from 'vue';
	import { onLoad, onBackPress } from '@dcloudio/uni-app';

	// data数据
	const { $fu } = getCurrentInstance().appContext.config.globalProperties;
	let searchValue = ref('123123');
	let inputStyle = reactive({});
	
	// 生命周期
	onLoad(() => {
		setTimeout(() => {
			Object.assign(inputStyle, {fontSize: '24rpx'})
		}, 500)
	});
	
	// methods方法
	const search = (e) => {
		$fu.toast(`搜索：${e.value}`)
	};
	
	const input = (e) => {
		console.log('----input:', e)
	};
	
	const clear = (e) => {
		$fu.toast(`clear事件，清除值为：${e.value}`)
	};
	
	const blur = (e) => {
		$fu.toast(`blur事件，输入值为：${e.value}`)
	};
	
	const focus = (e) => {
		$fu.toast(`focus事件，输出值为：${e.value}`)
	};
	
	const cancel = (e) => {
		$fu.toast(`点击取消，输入值为：${e.value}`)
	};
	
	onBackPress(() => {
		// #ifdef APP-PLUS
		plus.key.hideSoftKeybord();
		// #endif
	});
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>